<template>
	<view class="content">
		<h2>报名需知</h2>

		<view class="editor">
			编辑器内容
		</view>
		
		
		<u-button color="#00B5C3" text="签名" @click="gotosignpage"></u-button>

		<view class="sign">
			<view class="sign_inner">
				<u-button color="#00B5C3" text="我同意" @click="gotopage"></u-button>
			</view>
		</view>

		<canvas canvasId="myCanvas" style="width: 100%; height: 600px; background-color: beige;"></canvas>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				game_id: "",
				img1: "https://img2022.cnblogs.com/blog/1938691/202208/1938691-20220830174621843-1489372648.png",
				img2: "https://service.ayqqf.com/storage/common/202305/13/3c/33.jpg"
			}
		},
		onLoad(options) {
			this.game_id = options.game_id
			this.img2 = options.img2
			this.drawProdPicture()
		},
		methods: {
			gotosignpage() {
				uni.navigateTo({
					url: '/pages/subpages2/signature?game_id=' + this.game_id
				})
			},
			gotopage() {
				uni.navigateTo({
					url: '/pages/subpages/index/sign?game_id=' + this.game_id
				})
			},
			async drawProdPicture() {
				const ctx = uni.createCanvasContext("myCanvas");

				const image1 = await this.getImageInfo(this.img1)
				ctx.drawImage(image1.path, 0, 0, 300, 300)

				const image2 = await this.getImageInfo(this.img2)
				ctx.translate(150, 300); //用 translate方法修改原点
				ctx.rotate(-Math.PI / 2); //逆时针旋转90度
				ctx.drawImage(image2.path, -250, 0, 100, 200) //图像的左上角在目标canvas上 Y，X 轴的位置，旋转之前的长，宽

				ctx.draw(false, () => {
					uni.canvasToTempFilePath({
						canvasId: 'myCanvas',
						success: res => {
							console.log(res.tempFilePath)
						}
					})
				})
			},

			getImageInfo(src) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src,
						success: res => {
							resolve(res)
						},
						fail: err => {
							reject(err)
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	h2 {
		text-align: center;
		font-size: 16px;
		margin: 20px 0;
	}

	.content {
		margin: 0 2%;
	}

	.sign {
		position: fixed;
		bottom: 0px;
		background-color: #fff;
		width: 96%;
	}

	.sign_inner {
		width: 100%;
		margin: 0 0% 10px 0%;
	}
</style>
